<template>
  <div>
    <emailEdit
      ref="emailEdit"
      @refresh="getUserInfo"
      @changeDiv="changeEmailDiv"
      :showEmailDialog="showEmailDialog"
      v-show="showEmailDialog"/>
    <phoneEdit
      ref="phoneEdit"
      @refresh="getUserInfo"
      @changeDiv="changePhoneDiv"
      :showPhoneDialog="showPhoneDialog"
      v-show="showPhoneDialog"/>
    <questPwd
      ref="questPwd"
      @changeDiv="changeQuesDiv"
      :showQuesDialog="showQuesDialog"
      v-show="showQuesDialog"/>


    <common-page
      ref="commonPage"
      :is-padding="true"
      v-show="!showEmailDialog && !showPhoneDialog && !showQuesDialog">
      <ul slot="content">
        <li>
          <div class="item">
            <h2>账号密码</h2>
            <p>********</p>
          </div>
          <div class="fr" @click="editPwdFun">修改</div>
        </li>
        <li>
          <div class="item">
            <h2>手机号</h2>
            <p>已绑定手机{{ user.encodePhone }}</p>
          </div>
          <div class="fr" @click="editPhoneFun">修改</div>
        </li>
        <li>
          <div class="item">
            <h2>邮箱</h2>
            <p>已绑定邮箱{{ user.encodeEmail }}</p>
          </div>
          <div class="fr" @click="editEmailFun">修改</div>
        </li>
        <li>
          <div class="item">
            <h2>密保问题</h2>
          </div>
          <div class="fr" @click="editQuestPwdFun">设置</div>
        </li>
      </ul>
      <div slot="content">
        <resetPwd ref="resetPwd"/>
        <!--        <phoneEdit ref="phoneEdit" @refresh="getUserInfo"/>-->
        <!--        <emailEdit ref="emailEdit" @refresh="getUserInfo"/>-->
<!--        <questPwd ref="questPwd"/>-->
      </div>

    </common-page>
  </div>

</template>

<script type="text/javascript">
  import resetPwd from './resetPwd'
  import phoneEdit from '../components/phoneEdit'
  import emailEdit from '../components/emailEdit'
  import questPwd from '../components/questPwd'
  import { getUserProfile } from '@/api/person/index'
  import Utils from '@/utils'
  import { decode, encode } from '@/utils/aesUtils'

  export default {
    components: { resetPwd, phoneEdit, emailEdit, questPwd },
    //存放数据
    data() {
      return {
        user: {},
        showEmailDialog: false,
        showPhoneDialog: false,
        showQuesDialog: false,
      }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      /**
       * 编辑密码
       */
      editPwdFun() {
        this.$refs.resetPwd.show()
      },
      /**
       * 编辑手机号
       */
      editPhoneFun() {
        this.showPhoneDialog = true
        this.$refs.phoneEdit.show(this.user)
      },
      /**
       * 编辑邮箱
       */
      editEmailFun() {
        this.showEmailDialog = true
        this.$refs.emailEdit.show(this.user)
      },
      /**
       * 编辑密保问题
       */
      editQuestPwdFun() {
        this.showQuesDialog = true
        this.$refs.questPwd.show(this.user)
      },
      /**
       * 获取个人信息
       */
      getUserInfo() {
        getUserProfile().then((response) => {
          this.user = Object.assign(response.user, {
            encodePhone: response.user.phonenumber ? Utils.phoneEncryption(decode(response.user.phonenumber)) : '',
            encodeEmail: response.user.email ? Utils.emailEncryption(decode(response.user.email)) : ''
          })
          if (this.$route.query.type === 'setQuestion') {
            this.showQuesDialog = true
            this.$refs.questPwd.show(this.user)
          }
        })
      },
      changeEmailDiv() {
        this.showEmailDialog = false
      },
      changePhoneDiv() {
        this.showPhoneDialog = false
      },
      changeQuesDiv() {
        this.showQuesDialog = false
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getUserInfo()
    }
  }
</script>

<style lang="scss" scoped>
  ul {
    margin: 0;
    padding: 0;

    li {
      height: auto;
      overflow: hidden;
      display: flex;
      align-items: center;
      width: 100%;
      position: relative;
      padding: 20px 50px;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: #eee;
      }

      .item {
        flex: 1;

        h2 {
          font-size: 15px;
        }

        p {
          margin: 0;
          font-size: 14px;
        }
      }

      .fr {
        font-size: 15px;
        color: var(--theme-color) !important;
        cursor: pointer;
      }
    }
  }
</style>
